<template>
  <view class="container">
    <view
      class="bg"
      :style="{
        backgroundImage: 'url(' + $util.img('image/mall_submit_bg.png') + ')',
      }"
    >
    </view>
    <u-navbar
      :title="title"
      @rightClick="rightClick"
      :autoBack="true"
      bgColor="transparent"
      color="#ffffff"
      leftIconColor="#ffffff"
      :titleStyle="titleStyle"
      :placeholder="true"
    >
    </u-navbar>

    <view class="boxPanel rel" style="padding: 0 0 20rpx">
      <view class="tabs2">
        <view
          class="tabsitem"
          v-for="(deliveryItem, deliveryIndex) in orderPaymentData.shop_goods_list.express_type"
          :class="deliveryItem.name == orderPaymentData.delivery.delivery_type ? 'active' : ''"
          :key="deliveryIndex"
          @click="selectDeliveryType(deliveryItem)"
        >
          <text>{{ deliveryItem.title == "快递发货" ? "快递物流" : deliveryItem.title }}</text>
        </view>
      </view>
      <block v-if="orderPaymentData.delivery.delivery_type != 'store'">
        <view class="addressEmpty m-l-24 m-r-24 m-t-24" v-if="orderPaymentData.member_address" @click="selectAddress">
          <image :src="$util.img('/image/map.png')" mode="" class="mapimg"></image>
          <view class="" style="width: 80%">
            <view class="font-32 text-bold">
              {{ orderPaymentData.member_address.name ? orderPaymentData.member_address.name : "" }}
              {{ orderPaymentData.member_address.mobile ? orderPaymentData.member_address.mobile : "" }}
            </view>
            <view class="font-24 c-a4">
              {{ orderPaymentData.member_address.full_address ? orderPaymentData.member_address.full_address : "" }}
              {{ orderPaymentData.member_address.address ? orderPaymentData.member_address.address : "" }}
            </view>
          </view>
          <u-icon name="arrow-right" color="#788096" size="18"></u-icon>
        </view>
        <view class="addressEmpty m-l-24 m-r-24 m-t-24" v-else @click="selectAddress">
          <image :src="$util.img('image/map.png')" mode="" class="mapimg"></image>
          <view class="" style="width: 80%">
            <view class="font-32 text-bold">请添加您的收货地址</view>
            <view class="font-24 c-a4">添加收货人、手机号、详细地址</view>
          </view>
          <u-icon name="arrow-right" color="#788096" size="18"></u-icon>
        </view>
      </block>
      <view class="store-box" v-if="orderPaymentData.delivery.delivery_type == 'store'">
        <view class="storeinfo m-l-24 m-r-24 m-t-24" v-if="storeInfo.currStore" @click="openChooseStore">
          <image
            :src="$util.img(storeInfo.currStore.store_image)"
            mode="aspectFill"
            class="img"
            lazy-load
            v-if="storeInfo.currStore.store_image"
          ></image>
          <image :src="$util.img('image/store.png')" mode="aspectFill" class="img" lazy-load v-else></image>
          <view class="">
            <view class="text-bold flex-y-center"
              >{{ storeInfo.currStore.store_name }}<u-icon name="arrow-right" color="#1C274C" size="18"></u-icon
            ></view>
            <view class="font-24 c-78 flex-y-center" @click.stop="callPhone(storeInfo.currStore.telphone)">
              联系电话：
              <image
                :src="$util.img('image/erqi/mobile.png')"
                mode="widthFix"
                class="m-r-10"
                style="width: 40rpx"
              ></image>
              {{ storeInfo.currStore.telphone }}
            </view>
            <view class="flex-x-between" @click.stop="goMap">
              <!-- <view class="flex-y-center">
									<i class="iconfont">&#xe620;</i>
									<text class="font-24 c-78 m-r-14">距您2.5km</text>
								</view> -->
              <view class="font-24 c-b4">{{ storeInfo.currStore.address }}</view>
            </view>
          </view>
        </view>
        <view v-else class="storeinfo m-l-24 m-r-24 m-t-24 font-24 c-a4">当前无自提门店，请选择其它配送方式</view>
      </view>
    </view>

    <view class="boxPanel rel">
      <view
        class="m-b-30"
        v-for="(goodsItem, goodsIndex) in orderPaymentData.shop_goods_list.goods_list"
        :key="goodsIndex"
      >
        <view class="goodsInfo">
          <image :src="$util.img(goodsItem.sku_image, { size: 'mid' })" mode="aspectFill" lazy-load></image>
          <view class="right">
            <view class="name ellipsis-2">{{ goodsItem.sku_name }}</view>
            <view class="font-24 c-78" v-if="goodsItem.sku_spec_format">
              <block v-for="(x, i) in goodsItem.sku_spec_format" :key="i">
                {{ x.spec_value_name }}
                {{ i < goodsItem.sku_spec_format.length - 1 ? "; " : "" }}
              </block>
            </view>
            <view class="font-32 flex-x-between">
              <text>¥{{ goodsItem.price }}</text>
              <text>x{{ goodsItem.num }}</text>
            </view>
          </view>
        </view>
        <!-- <view class="flex-between">
					 <text class="c-60">购买数量</text>
					 <view class="quantity-control">
					   <view class="btn-minus" @click="decreaseQuantity()">-</view>
					   <input type="number" v-model="number" class="quantity">
					   <view class="btn-plus color-title2" @click="increaseQuantity()">+</view>
					 </view>
				   </view> -->
      </view>
      <view class="flex-between m-b-20">
        <view class="flex-y-center c-60"> 备注 </view>
        <input
          type="text"
          placeholder="请填写备注"
          v-model="orderCreateData.buyer_message"
          placeholder-class="inputs"
          class="text-right"
          style="width: 50%"
        />
      </view>
      <view class="flex-x-between border p-b-20" v-if="orderPaymentData.delivery.delivery_type != 'store'">
        <text class="c-60">发货方式</text>
        <text>包邮</text>
      </view>

      <view class="m-t-20 flex-x-end flex-y-baseline">
        <view class="c-60">共{{ orderPaymentData.goods_num }}件，合计金额</view>
        <text class="font-32 text-bold c-origin m-l-6">¥{{ orderPaymentData.goods_money | moneyFormat }}</text>
      </view>
    </view>

    <view class="boxPanel">
      <view class="font-30 text-bold m-b-20"> 支付方式 </view>
      <view class="payrow" v-for="(item, index) in paylist" :key="index" @click="changePayment(index)" v-if="item.show">
        <image :src="$util.img(item.icon)" mode="" class="payimg"></image>
        {{ item.name }}
        <text class="color-title2 m-l-20" v-if="item.name == '购物卡支付'">可用¥{{ cardInfo.balance || 0 }}</text>
        <text class="color-title2 m-l-20" v-if="item.name == '余额支付'"
          >可用¥{{
            orderPaymentData.order_money > 0 && orderPaymentData.member_account.balance_total > 0 ? balanceDeduct : "0"
          }}</text
        >
        <image :src="$util.img('image/radio2.png')" mode="" class="radio" v-if="payIndex == index"></image>
        <image :src="$util.img('image/radio.png')" mode="" class="radio" v-else></image>
      </view>
    </view>

    <view class="footer fixfooter" :class="{ 'bottom-safe-area': isIphoneX }">
      <view class="">
        <view class="font-24 c-8d">共 {{ orderPaymentData.goods_num }} 件 需支付</view>
        <view class="money c-origin text-bold font-52 flex" style="align-items: baseline; margin-top: -16rpx">
          <text class="font-28 c-origin">￥</text>{{ pay_money | moneyFormat }}
        </view>
      </view>
      <view class="submit" @click="orderCreate">立即支付</view>
      <!-- v-if="isDisable" -->
      <!-- <view class="submit" style="background: #999" v-else>立即支付</view> -->
    </view>
    <!-- 选择门店组件 -->
    <chooseStore
      :show="showStore"
      :storeInfo="storeInfo"
      :orderPaymentData="orderPaymentData"
      @close="closeStore"
      v-if="showStore"
      @selectPickupPoint="selectPickupPoint"
    ></chooseStore>
  </view>
</template>

<script>
import chooseStore from "@/components/chooseStore/chooseStore.vue";
export default {
  components: {
    chooseStore,
  },
  data() {
    return {
      isIphoneX: false, //判断手机是否是iphoneX以上
      titleStyle: {
        color: "#ffffff",
      },
      title: "",
      identifyIndex: 0,
      identifyList: [
        {
          name: "快递物流",
          merchantCategoryId: 2,
        },
        {
          name: "门店自提",
          merchantCategoryId: 1,
        },
      ],
      number: 1,
      paylist: [
        {
          name: "购物卡支付",
          icon: "/image/paycard.png",
          show: false,
        },
        {
          name: "微信支付",
          icon: "/image/pay2.png",
          show: true,
        },
        {
          name: "余额支付",
          icon: "/image/pay1.png",
          show: true,
        },
      ],
      payIndex: 0,
      orderCreateData: {
        is_balance: 0,
        member_address: {
          mobile: "",
        },
      },
      orderPaymentData: {
        shop_goods_list: {
          site_name: "",
          express_type: [],
          coupon_list: [],
          invoice: {
            invoice_content_array: [],
          },
        },
        member_account: {
          balance: 0,
        },
        delivery: {
          delivery_type: "",
        },
        member_address: {
          mobile: "",
        },
      },
      pay_money: 0, //实际支付金额
      pay_balance_money: 0, //余额支付时实际支付金额
      // 门店信息
      storeInfo: {
        storeList: [], //门店列表
        currStore: {}, //当前选择门店
      },
      // 自提地址
      member_address: {
        mobile: "",
      },
      isSub: false, //防止重复提交
      // 选择自提、配送防重判断
      judge: true,
      isDisable: false, //是否禁止提交
      //购物卡信息
      cardInfo: {
        balance: 0, //余额
        status: "", //状态   1:正常 2:不可用（已过期）
      },
      //选择门店
      showStore: false,
    };
  },
  filters: {
    // 金额格式化输出
    moneyFormat(money) {
      return parseFloat(money).toFixed(2);
    },
  },
  computed: {
    // 余额抵扣
    balanceDeduct() {
      if (
        this.orderPaymentData.member_account.balance_total <= parseFloat(this.orderPaymentData.order_money).toFixed(2)
      ) {
        return parseFloat(this.orderPaymentData.member_account.balance_total).toFixed(2);
      } else {
        return parseFloat(this.orderPaymentData.member_account.balance_total).toFixed(2);
      }
    },
  },
  onLoad() {
    this.isIphoneX = this.$util.uniappIsIPhoneX();
  },
  onShow() {
    this.getOrderPaymentData();
  },
  methods: {
    // 选择自提点
    selectPickupPoint(store_item) {
      this.orderCreateData.delivery.store_id = store_item.store_id;
      this.storeInfo.currStore = store_item;
      Object.assign(this.orderPaymentData, this.orderCreateData);
      this.orderCalculate();
      this.$forceUpdate();
    },
    openChooseStore() {
      this.showStore = true;
    },
    closeStore() {
      this.showStore = false;
    },
    callPhone(phone) {
      uni.makePhoneCall({
        phoneNumber: phone,
      });
    },
    goMap() {
      // 在地图显示该位置导航
      uni.openLocation({
        latitude: Number(this.storeInfo.currStore.latitude),
        longitude: Number(this.storeInfo.currStore.longitude),
        name: this.storeInfo.currStore.canteen_name,
        address: this.storeInfo.currStore.full_address + this.storeInfo.currStore.address,
      });
    },
    changePayment(index) {
      if (index == 2) {
        // 比对余额是否满足支付金额
        if (parseFloat(this.orderPaymentData.member_account.balance) < parseFloat(this.orderPaymentData.pay_money)) {
          uni.showToast({
            title: "余额不足，请选择其他支付方式",
            icon: "none",
          });
          return;
        } else {
          this.orderCreateData.is_balance = 1;
          this.payIndex = index;
        }
      } else {
        this.orderCreateData.is_balance = 0;
        this.payIndex = index;
      }
      console.log("支付方式索引", this.payIndex);
      this.orderCalculate();
      this.$forceUpdate();
    },
    orderCreate() {
      if (this.verify()) {
        if (this.isSub) return;
        this.isSub = true;

        uni.showLoading({
          title: "支付中...",
          mask: true,
        });

        var data = this.$util.deepClone(this.orderCreateData);
        data.delivery = JSON.stringify(data.delivery);

        if (this.orderCreateData.delivery.delivery_type == "store") {
          data.member_address = JSON.stringify(this.member_address);
        } else {
          data.member_address = JSON.stringify(data.member_address);
        }

        // 判断是否选择了购物卡支付
        if (this.payIndex == 0) {
          // 判断购物卡金额是否足够支付，不足的话给出提示：购物卡金额不足，请更换其他支付方式！
          if (parseFloat(this.cardInfo.balance) < parseFloat(this.orderPaymentData.pay_money)) {
            uni.showToast({
              title: "购物卡金额不足，请更换其他支付方式",
              icon: "none",
            });
            this.isSub = false;
            return;
          }
          data.is_shoppingcard = 1;
        }

        this.$api.sendRequest({
          url: "/pintuan/api/ordercreate/create",
          data,
          success: (res) => {
            uni.hideLoading();
            if (res.code >= 0) {
              if (this.orderPaymentData.pay_money == 0) {
                this.$util.redirectTo("/pages/paySuccess/paySuccess", {}, "redirectTo");
              } else {
                this.out_trade_no = res.data;
                let create = uni.getStorageSync("pintuanOrderCreateData");
                create.out_trade_no = this.out_trade_no;
                uni.setStorageSync("pintuanOrderCreateData", create);
                this.pay(res.data);
                this.isSub = false;
              }
            } else {
              this.$util.showToast({
                title: res.message,
              });
              this.isSub = false;
            }
          },
          fail: (res) => {
            uni.hideLoading();
            this.isSub = false;
          },
        });
      }
    },
    pay(out_trade_no) {
      uni.setStorageSync("pay_flag", 1);
      var that = this;
      this.$api.sendRequest({
        url: "/api/pay/pay",
        data: {
          out_trade_no: out_trade_no,
          pay_type: "wechatpay",
        },
        success: (res) => {
          uni.hideLoading();
          if (res.code >= 0) {
            var payData = res.data.data;
            uni.requestPayment({
              provider: "wxpay",
              timeStamp: payData.timeStamp,
              nonceStr: payData.nonceStr,
              package: payData.package,
              signType: payData.signType,
              paySign: payData.paySign,
              success: (res) => {
                that.$util.redirectTo(
                  "/pages/paySuccess/paySuccess",
                  {
                    type: "mall",
                  },
                  "redirectTo"
                );
              },
              fail: (res) => {
                that.flag = false;
                if (res.errMsg == "requestPayment:fail cancel") {
                  that.$util.showToast({ title: "您已取消支付" });
                } else {
                  uni.showModal({
                    content: "支付失败,失败原因: " + res.errMsg,
                    showCancel: false,
                  });
                }
                setTimeout(() => {
                  that.$util.redirectTo("/pages/mallOrder/mallOrder", {}, "reLaunch");
                }, 2000);
              },
            });
          } else {
            this.$util.showToast({
              title: "未获取到支付信息！",
            });
            setTimeout(() => {
              this.$util.redirectTo("/pages/index/index", {}, "reLaunch");
            }, 1500);
          }
        },
      });
    },
    // 订单验证
    verify() {
      if (this.orderPaymentData.is_virtual == 0) {
        if (this.orderCreateData.delivery.delivery_type != "store") {
          if (!this.orderPaymentData.member_address) {
            this.$util.showToast({
              title: "请先选择您的收货地址",
            });
            return false;
          }
        }

        if (this.orderCreateData.delivery.delivery_type == "store") {
          if (!this.orderCreateData.delivery.store_id) {
            this.$util.showToast({
              title: "没有可提货的门店,请选择其他配送方式",
            });
            return false;
          }
        }

        let deliveryVerify = true;

        for (let key in this.orderCreateData.delivery) {
          if (JSON.stringify(this.orderCreateData.delivery[key]) == "{}") {
            deliveryVerify = false;
            this.$util.showToast({
              title: '店铺"' + this.orderPaymentData.shop_goods_list[key].site_name + '"未设置配送方式',
            });
            break;
          }
          if (
            this.orderCreateData.delivery[key].delivery_type == "store" &&
            this.orderCreateData.delivery[key].store_id == 0
          ) {
            deliveryVerify = false;
            this.$util.showToast({
              title:
                '店铺"' + this.orderPaymentData.shop_goods_list[key].site_name + '"没有可提货的门店,请选择其他配送方式',
            });
            break;
          }
        }

        if (!deliveryVerify) return false;
      }

      return true;
    },
    // 选择收货地址
    selectAddress() {
      var params = {
        back: "/otherpages/mall/tuanSubmitOrder",
      };

      this.$util.redirectTo("/pages/address/address", params);
    },
    getOrderPaymentData() {
      if (this.out_trade_no) return;

      this.orderCreateData = uni.getStorageSync("pintuanOrderCreateData");
      var pay_flag = uni.getStorageSync("pay_flag"); // 支付中标识，防止返回时，提示,跳转错误

      if (!this.orderCreateData) {
        if (pay_flag == 1) {
          uni.removeStorageSync("pay_flag");
        } else {
          this.$util.showToast({
            title: "未获取到创建订单所需数据！",
          });
          setTimeout(() => {
            this.$util.redirectTo("/pages/index/index", {}, "reLaunch");
          }, 1500);
        }
        return;
      }

      let location = this.$util.getLocation();
      if (location) {
        this.orderCreateData = Object.assign(this.orderCreateData, location);
      }

      this.$api.sendRequest({
        url: "/pintuan/api/ordercreate/payment",
        data: this.orderCreateData,
        success: (res) => {
          if (res.code == 0) {
            this.orderPaymentData = res.data;
            this.$forceUpdate();

            // 判断返回是否有购物卡信息，有的话，则显示购物卡支付
            if (res.data.member_shoppingcard) {
              this.cardInfo = res.data.member_shoppingcard;
              // 判断购物卡是否可用
              if (this.cardInfo.status == 1) {
                this.paylist[0].show = true;
                // 判断购物卡是否足够支付
                if (parseFloat(this.cardInfo.balance) >= this.orderPaymentData.order_money) {
                  this.paylist[0].show = true;
                } else {
                  this.payIndex = 1;
                }
              } else {
                this.paylist[0].show = false;
                this.payIndex = 1;
              }
            } else {
              this.paylist[0].show = false;
              this.payIndex = 1;
            }

            this.handlePaymentData();
          } else {
            this.$util.showToast({
              title: "未获取到创建订单所需数据！",
            });
            setTimeout(() => {
              this.$util.redirectTo("/pages/index/index", {}, "reLaunch");
            }, 1500);
          }
        },
      });
    },
    // 处理结算订单数据
    handlePaymentData() {
      this.orderCreateData.delivery = {};
      this.orderCreateData.buyer_message = "";

      this.orderCreateData.is_balance = 0;

      var data = this.orderPaymentData;

      // 店铺配送方式
      if (data.shop_goods_list.express_type != undefined && data.shop_goods_list.express_type[0] != undefined) {
        var express_type = data.shop_goods_list.express_type;
        this.orderCreateData.delivery.store_id = 0;
        // 获取选择配送方式缓存
        var delivery_storage = uni.getStorageSync("delivery");
        if (delivery_storage) {
          var delivery_type = delivery_storage.name;
          var delivery_type_name = delivery_storage.title;
          // 如果配送方式缓存是门店配送模拟点击门店tab选项
          if (delivery_type == "store") {
            data.shop_goods_list.express_type.forEach((item) => {
              if (item.name == "store") {
                this.storeSelected(item);
              }
            });
            this.member_address = {
              mobile: data.member_account.mobile != "" ? data.member_account.mobile : "",
            };
          }
        } else {
          var delivery_type = express_type[0].name;
          if (delivery_type == "store") {
            this.member_address = {
              mobile: data.member_account.mobile != "" ? data.member_account.mobile : "",
            };
          }
          var delivery_type_name = express_type[0].title;
        }
        this.orderCreateData.delivery.delivery_type = delivery_type;
        this.orderCreateData.delivery.delivery_type_name = delivery_type_name;

        // 如果默认配送方式是门店配送模拟点击门店tab选项
        if (express_type[0].name == "store") {
          this.storeSelected(express_type[0]);
        }
      }

      Object.assign(this.orderPaymentData, this.orderCreateData);
      this.orderPaymentData.shop_goods_list.goods_list.forEach((v) => {
        if (v.sku_spec_format) {
          v.sku_spec_format = JSON.parse(v.sku_spec_format);
        } else {
          v.sku_spec_format = [];
        }
      });

      this.orderCalculate();
    },
    // 订单计算
    orderCalculate() {
      var data = this.$util.deepClone(this.orderCreateData);
      data.delivery = JSON.stringify(data.delivery);

      if (this.orderCreateData.delivery.delivery_type == "store") {
        data.member_address = JSON.stringify(this.member_address);
      } else {
        data.member_address = JSON.stringify(data.member_address);
      }

      // 判断是否使用购物卡支付进行计算，如果是则传递is_shoppingcard参数为1
      if (this.payIndex == 0) {
        data.is_shoppingcard = 1;
      }

      this.$api.sendRequest({
        url: "/pintuan/api/ordercreate/calculate",
        data,
        success: (res) => {
          if (res.code >= 0) {
            this.orderPaymentData.member_address = res.data.member_address;
            this.orderPaymentData.delivery_money = res.data.delivery_money;
            this.orderPaymentData.order_money = res.data.order_money;
            this.orderPaymentData.balance_money = res.data.balance_money;
            this.orderPaymentData.pay_money = res.data.pay_money;
            this.orderPaymentData.goods_money = res.data.goods_money;
            this.orderPaymentData.shop_goods_list.goods_list = res.data.shop_goods_list.goods_list;

            this.pay_money = res.data.order_money;
            this.pay_balance_money = res.data.pay_money;

            this.orderPaymentData.shop_goods_list.goods_list.forEach((v) => {
              if (v.sku_spec_format) {
                v.sku_spec_format = JSON.parse(v.sku_spec_format);
              } else {
                v.sku_spec_format = [];
              }
            });
            this.orderPaymentData.shop_goods_list.delivery = res.data.shop_goods_list.delivery;

            this.orderPaymentData.shop_goods_list.delivery_store_info = res.data.shop_goods_list.delivery_store_info;

            // if(this.judge){
            // 	if(this.orderPaymentData.delivery.delivery_type == "store"){
            // 		this.storetime('no');
            // 	}else if(this.orderPaymentData.delivery.delivery_type == 'local'){
            // 		this.localtime('no');
            // 	}
            // 	this.judge = false;
            // }

            // this.createBtn();

            this.$forceUpdate();

            // this.judgeDeliveryType();
          } else {
            this.$util.showToast({
              title: res.message,
            });
          }
        },
      });
    },
    // 验证商品是否满足配送形式
    judgeDeliveryType() {
      var data = this.$util.deepClone(this.orderCreateData);
      data.delivery = JSON.stringify(data.delivery);

      if (this.orderCreateData.delivery.delivery_type == "store") {
        data.member_address = JSON.stringify(this.member_address);
      } else {
        data.member_address = JSON.stringify(data.member_address);
      }

      this.$api.sendRequest({
        url: "/api/ordercreate/verifyGoods",
        data,
        success: (res) => {
          if (res.code >= 0) {
            this.isDisable = true;
            console.log("符合配送规则");
          } else {
            this.isDisable = false;
            this.$util.showToast({
              title: res.message,
            });
          }
        },
      });
    },
    // 选择配送方式
    selectDeliveryType(data) {
      uni.setStorageSync("delivery", {
        title: data.title,
        name: data.name,
      });
      this.orderCreateData.delivery.delivery_type = data.name;
      this.orderCreateData.delivery.delivery_type_name = data.title;
      // 如果是门店配送
      if (data.name == "store") {
        this.storeSelected(data);
        if (!this.member_address.mobile)
          this.member_address.mobile =
            this.orderPaymentData.member_account.mobile != "" ? this.orderPaymentData.member_account.mobile : "";
      }
      Object.assign(this.orderPaymentData, this.orderCreateData);

      this.judge = true;

      this.orderCalculate();

      this.$forceUpdate();
    },
    // 切换到门店
    storeSelected(data) {
      // 门店列表
      this.storeInfo.storeList = data.store_list;
      if (this.orderCreateData.delivery.store_id > 0) return;
      // 获取首页门店选择缓存
      var curr_store = uni.getStorageSync("store");
      if (curr_store && data.store_id == curr_store.store_id) {
        this.storeInfo.currStore = curr_store;
        this.orderCreateData.delivery.store_id = this.storeInfo.currStore.store_id;
      } else if (data.store_list[0] != undefined) {
        this.storeInfo.currStore = data.store_list[0];
        this.orderCreateData.delivery.store_id = data.store_list[0].store_id;
      } else {
        this.storeInfo.currStore = null;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.bg {
  position: absolute;
  top: 0;
  width: 750rpx;
  height: 474rpx;
  background-position: 100% 100%;
  background-repeat: no-repeat;
  background-size: cover;
}
.tabs2 {
  display: flex;
  background: #ffffff;
  border-radius: 20rpx 20rpx 0 0;
  .tabsitem {
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 20rpx 20rpx 0 0;
    height: 95rpx;
    color: #8d93a5;
    font-size: 32rpx;
  }
  .active {
    color: #fff !important;
    background: $color-title2 !important;
  }
}
.addressEmpty {
  display: flex;
  .mapimg {
    width: 80rpx;
    height: 80rpx;
    flex-shrink: 0;
    margin-right: 24rpx;
  }
}
.goodsInfo {
  display: flex;
  padding-bottom: 20rpx;
  image {
    width: 180rpx;
    height: 180rpx;
    border-radius: 20rpx;
    margin-right: 20rpx;
  }
  .right {
    width: 70%;
    .name {
      height: 78rpx;
      line-height: 1.4;
      margin-bottom: 20rpx;
    }
  }
}

/* 数量控制 */
.quantity-control {
  display: flex;
  align-items: center;
  border: 1px solid #e7e8eb;
  border-radius: 40rpx;
}

.btn-minus,
.btn-plus {
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  font-size: 32rpx;
  color: #333;
  margin: 0 10rpx;
  font-weight: bold;
}

.quantity {
  font-size: 32rpx;
  margin: 0 20rpx;
  text-align: center;
  width: 30rpx;
}

// 支付方式选项
.payrow {
  display: flex;
  align-items: center;
  padding: 16rpx 0;
  font-size: 26rpx;
  width: 100%;
  .payimg {
    width: 67rpx;
    height: 67rpx;
    margin-right: 20rpx;
  }
  .radio {
    width: 34rpx;
    height: 34rpx;
    margin-left: auto;
  }
}

// 自提门店信息
.storeinfo {
  display: flex;
  .img {
    width: 115rpx;
    height: 104rpx;
    margin-right: 20rpx;
  }
  .iconfont {
    font-size: 30rpx;
    color: #788096;
  }
}

.footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  // padding: 0 24rpx;
  box-sizing: border-box;
  .submit {
    width: 265rpx;
    height: 86rpx;
    line-height: 86rpx;
    text-align: center;
    background-color: $color-title2;
    color: #fff;
    border-radius: 40rpx;
  }
}
</style>
